import React from 'react';
import ReactDOM from 'react-dom';
import {Upload, Button, Icon} from 'antd';

import $ from 'jquery';
export default class CustomUpload extends React.Component {

	 constructor(props, context){
        super(props, context);
        let defaultFileList = this.clone(props.defaultFileList)
        defaultFileList.forEach((item,index) => {
        	item.status='done',
        	item.uid = this.uuid();
        })
        this.state={
        	defaultFileList,
        	isChange:false,
        	iconLoading:false,
        }
    }

    componentWillReceiveProps(nextProps){
    	let defaultFileList = this.clone(nextProps.defaultFileList)
        defaultFileList.forEach((item,index) => {
        	item.status=item.status ||'done',
        	item.uid = item.uid ||this.uuid();
        })
        this.state={
        	defaultFileList,
        	isChange:false,
        	iconLoading:false,
        }
    }

    clone(data=[]){
    	return JSON.parse(JSON.stringify(data))
    }

    uuid(){
    	return Math.random().toString(32).slice(2)
    }



	uploadProps () {
		let {defaultFileList} = this.state;
		let {onChange} = this.props;
		let fileList = this.clone(defaultFileList);
		const props = {
		  customRequest:async ({ file, fileList }) => {
		  	let {defaultFileList=[]} = this.state;
		  	let result = await uploadFile(file);
		  	if(result){
		  		defaultFileList.push({
		    		name:file.name,
		    		url:result,
		    		uid:this.uuid(),
		    		status:'done'
		    	})
		  	}
		  	this.setState({defaultFileList,isChange:true})
		  },
		  fileList,
		  onRemove:(file) => {
		  	let list = this.remove(file);
		  	return true
		  }
		};
		return props
	}

	remove(file){
		let {defaultFileList=[]} = this.state;
		let i = null;
		defaultFileList.forEach((item,index) => {
			if((file.response||file.url).startsWith(item.url)){
				i = index
			}
			return
		})
		if(typeof i == 'number'){
			defaultFileList.splice(i,1);
			this.setState({defaultFileList,isChange:true})
		}
		return defaultFileList;
	}

	reset(){
		let {defaultFileList} = this.state;
		this.state={
        	defaultFileList,
        	isChange:false,
        	iconLoading:false,
        }
	}

	_onClick = async () => {
		this.setState({iconLoading:true})
		let {onOk} = this.props,
			{iconLoading , defaultFileList} = this.state
		if(typeof onOk == 'function'){
			await onOk(defaultFileList);
		}
		this.reset();
	}

	render(){
		let {text='上传'} = this.props;
		let {isChange} = this.state;
		return (
			<div>
				<Upload {...this.uploadProps()}>
	              <Button>
	                <Icon type="upload" /> {text}
	              </Button>
	            </Upload>
	            {isChange?
              		<Button 
              			type="primary" 
              			style={{marginLeft:'10px'}}
              			loading={this.state.iconLoading}
              			onClick={this._onClick}
              		>确定</Button>
              	:null
             	}
            </div>
		)
	}
}

function uploadFile(file){
	return new Promise((resolve, reject) =>{
        let dataform = new FormData();
	  	dataform.append('file' , file);
	  	$.ajax({
            url:'/file/upload-file',
            data:dataform,
            type:'POST',
            contentType: false,  
      		processData: false,  
            success:(data) =>{
            	resolve(data)
            }
        })
    });
}

